import type { SoElements } from '../../../../../../../../types/constants/personalization/so'
import type { IPageBarStylesConfig } from '../../../base'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import { PageHandler } from '../../../../../../../../lib/page_handler'
import {
  SO_SEARCH_PAGE_SELECTORS,
  SoPageType,
} from '../../../../../../../../lib/page_handler/platform/so/types'
import { PollingHandler } from '../../../../../../../../lib/polling_handler'
import {
  AppStyleCollections,
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import { PageBaseStyles } from '../../../base'
import { SearchCommonStyles } from '../../common'

export class SoCommonPage {
  readonly name: string = 'SoCommonPage'
  elements: SoElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.SO]
  private static instance: SoCommonPage
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly pageBaseStyles: PageBaseStyles = PageBaseStyles.getInstance()
  private readonly searchCommonStyles: SearchCommonStyles = SearchCommonStyles.getInstance()
  private readonly pollingHandler: PollingHandler = PollingHandler.getInstance()
  private readonly pageType = PageHandler.getCurrentPageType()

  /**
   * 获取单例实例
   */
  public static getInstance(): SoCommonPage {
    if (!SoCommonPage.instance) {
      SoCommonPage.instance = new SoCommonPage()
    }
    return SoCommonPage.instance
  }

  init(): void {
    this.bindInputEvent()

    // 360 文库首页需要等待搜索框加载完成
    if (this.pageType === SoPageType.IndexWenku) {
      const selector = SO_SEARCH_PAGE_SELECTORS[SoPageType.IndexWenku]!.searchBox.input

      const handler = () => {
        this.bindInputEvent()
      }
      this.pollingHandler.api.awaitElement(selector, handler)
    }
    else {
      this.bindInputEvent()
    }
  }

  bindInputEvent(): void {
    const supportPages = [
      SoPageType.Video,
      SoPageType.News,
      SoPageType.Wenku,
      SoPageType.IndexSearch,
      SoPageType.IndexVideo,
      SoPageType.IndexWenku,
    ]

    if (!supportPages.includes(this.pageType as SoPageType))
      return

    this.searchCommonStyles.bindInputEvent(
      SO_SEARCH_PAGE_SELECTORS[this.pageType as SoPageType]!,
      this.pageType === SoPageType.News
        ? (config) => {
            return $(config.searchBox.dropdown.hotRank || '').length > 0
          }
        : undefined,
    )
  }

  headerStyles(): string {
    return `
  .so-header {
    background-color: var(${this.themeVarService.search.header.background}) !important;
    padding: 16px 20px !important;

    .so-header__content {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;

      .so-header__right {
        .so-header-menu {
          .so-header-menu-item__title {
            color: var(${this.themeVarService.search.default.text}) !important;

            a {
              color: var(${this.themeVarService.search.default.text}) !important;
            }
          }
        }
      }
    }
  }
    `
  }

  tabStyles(activeClass: string = 'activated-tab', setMargin: boolean = true): string {
    return `
  background-color: var(${this.themeVarService.search.header.background}) !important;
  border-bottom: none !important;
  
  ul {
    padding: 0 !important;
    ${setMargin ? 'margin: 0 auto !important;' : ''}
    width: fit-content !important;
    
    li {
      &::after {
        background-color: transparent !important;
      }

      &.${activeClass} {
        a {
          color: var(${this.themeVarService.tab.textActive}) !important;
        }
      }

      a {
        color: var(${this.themeVarService.tab.text}) !important;
        
        &:hover {
          color: var(${this.themeVarService.tab.textHover}) !important;
        }
      }
    }
  }
    `
  }

  relationStyles(): string {
    const config: Partial<Record<SoPageType, string>> = {
      [SoPageType.Web]: '.mod-relation',
      [SoPageType.Encyclopedia]: '.mod-recommend',
    }

    const relationSelector = config[PageHandler.getCurrentPageType() as SoPageType]

    return !relationSelector
      ? ''
      : `
  ${relationSelector} {
    margin: 0 auto !important;
  }
    `
  }

  pageBarStyles(): string {
    const config: Partial<Record<SoPageType, IPageBarStylesConfig>> = {
      [SoPageType.Wenku]: {
        container: '#so-pagination',
        currentPage: '> li.active',
        otherPage: '> li:not(.active)',
      },
      [SoPageType.Encyclopedia]: {
        container: '#page',
        currentPage: '.curr-page',
        otherPage: '> a',
      },
    }

    const paginationConfig = config[PageHandler.getCurrentPageType() as SoPageType] || {
      container: '#page',
      currentPage: '> strong',
      otherPage: '> a',
    }

    return this.pageBaseStyles.pageBarStyles(paginationConfig)
  }

  footStyles(): string {
    const config: Partial<Record<SoPageType, string>> = {
      [SoPageType.Wenku]: '.wenku-search__footer-wrap',
      [SoPageType.IndexVideo]: '.footer',
      [SoPageType.IndexWenku]: '.wenku-page__footer',
      [SoPageType.WenkuNotFound]: '#ft',
    }

    const footerSelector = config[PageHandler.getCurrentPageType() as SoPageType] || '#footer'

    return `
  ${footerSelector} {
    background-color: transparent !important;
    text-align: center !important;
    padding: 18px 0 !important;
    
    span {
      color: var(${this.themeVarService.search.default.text}) !important;
      text-decoration: none !important;
    }
    
    a {
      color: var(${this.themeVarService.link.default.text}) !important;
      text-decoration: none !important;
      
      &:hover {
        color: var(${this.themeVarService.link.default.textHover}) !important;
        text-decoration: none !important;
      }
    }
  }
    `
  }

  asideStyles(): string {
    const config: Partial<Record<SoPageType, { container: string, childSelector: string }>> = {
      [SoPageType.Web]: {
        container: ':is(#warper, #wrapper) #container',
        childSelector: '#side',
      },
      [SoPageType.News]: {
        container: ':is(#warper, #wrapper) #container',
        childSelector: '#side',
      },
      [SoPageType.Encyclopedia]: {
        container: '#container',
        childSelector: '.aside',
      },
    }

    const footerSelector = config[PageHandler.getCurrentPageType() as SoPageType]

    return !footerSelector
      ? ''
      : `
/* 右侧边栏 */
${footerSelector.container} {
  position: relative !important;
  
  ${footerSelector.childSelector} {
    background-color: transparent !important;
    position: absolute !important;
    left: unset !important;
    right: 100px;
    top: 24px;
    border-left: none !important;
    z-index: ${AppStyleCollections.Search.value.Z_ASIDE} !important;
    
    &:hover {
      background-color: transparent !important;
    }
    
    h3 {
      color: var(${this.themeVarService.search.default.text}) !important;
      
      .g-feedback-line {
        background-color: transparent !important;
      }
    }
    
    .mh-all {
      border: none !important;
      
      &::after {
        border-top: none !important;
      }
      
      .mh-all-inner {
        background-color: transparent !important;
      }
    }
    
    .mh-hotnews-more {
      &::before, &::after {
        background-color: transparent !important;
      }
      
      .mh-inner-txt {
        background-color: transparent !important;
        color: var(${this.themeVarService.link.default.text}) !important;

        &:hover {
          color: var(${this.themeVarService.link.default.textHover}) !important;
          text-decoration: none !important;
        }
      }
    }
    
    /* 实时热搜 */
    #mohe-hotnews_right {
      ul {
        li {
          a {
            color: var(${this.themeVarService.link.default.text}) !important;
            
            &:hover {
              color: var(${this.themeVarService.link.default.textHover}) !important;
              text-decoration: none !important;
            }
          }
        }
      }
    }
    
    /* 猜你想搜 */
    #lm-rightbottom {
      ul {
        li {
          a {
            border-color: var(${this.themeVarService.default.border.colorNeutral}) !important;
            
            span {
              color: var(${this.themeVarService.link.default.text}) !important;
            }
            
            &:hover {
              span {
                color: var(${this.themeVarService.link.default.textHover}) !important;
              }
            }
          }
        }
      }
    }
    
    .mode-side-text {
      border-top-color: var(${this.themeVarService.default.border.colorNeutral}) !important;
    }
  }
}
`
  }

  getMainStyles(): string {
    return `
${this.asideStyles()}

/* 搜索分页 */
${this.pageBarStyles()}
`
  }
}
